<template>
  <!-- 功能区 -->
  <div class="ribbon h flex vcenter column">
    <!-- 头像 -->
    <div class="portrait w flex lcenter vcenter column" style="margin: 70% 0 30% 0;">
      <el-avatar shape="square" size="medium" icon="el-icon-user-solid"></el-avatar>
    </div>
    <!-- 常用功能 -->
    <div class="function w flex vcenter column ribbonIconStyle" style="flex:1;">
      <i 
        v-for="(item, index) in menuData.iconArr" :key="index" 
        :class="item" class="pointer menuIcon"
        @click="jumpPage(menuData.pathArr[index], item)"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: {
        iconArr: ['el-icon-chat-round', 'el-icon-user', "el-icon-collection", "el-icon-folder", 
          "el-icon-help", "el-icon-link", "el-icon-mobile-phone", "el-icon-setting"],
        pathArr: ['/chat', '/friend', '/', '/', 
          '/', '/', '/', '/login'],
      }
    }
  },
  methods: {
    jumpPage(path, className){
      // Array.prototype.forEach.call(document.getElementsByClassName('menuIcon'),(el)=>{
      //   el.classList.remove('is-chack')
      // })
      // document.getElementsByClassName(className)[0].classList.add('is-chack')
      if (path == '/login') {
        localStorage.clear();
        this.$store.commit('setChatUserInfo', {
          isLogin: false,
          username: '',
          account: '',
        })
      }
      this.$router.push(path)
    },
  }
}
</script>

<style>
.ribbon{
  width: 6.5%;
  background-color: rgb(46, 46, 46, 0.9);
}
.content{
  width: 94%;
}
.ribbonIconStyle{
  color: rgb(147, 147, 147, 0.8);
  font-size: 23px;
}
.menuIcon{
  margin-bottom: 40%;
}
.menuIcon:hover{
  color: rgba(192, 192, 192, 0.9);
}
.is-chack{
  color: rgba(7, 193, 96, 0.9);
}
</style>